import Taro, {Component, Config} from '@tarojs/taro';
import {View} from '@tarojs/components';
import './index.scss';
import {AtInput} from 'taro-ui';
import HxPage from '../../components/hxPage/hxPage';

export default class ChargePage extends Component {
    constructor() {
        super(...arguments);
        this.state = {
            money: '',
            cardInfo: null
        };
    }

    config: Config = {
        // navigationBarTitleText: '一卡通充值'
        navigationBarTitleText: ''
    };

    onSubmit() {
        this.setState({
            money: (this.state['money'] + '').replace(/(\.*$)/g, '')
        });
        if (this.state['money']) {
            Taro.navigateTo({
                url: '/pages/chargeDetail/index?chargetype=1&money=' + this.state['money'] + '&cardInfo=' + JSON.stringify(this.state['cardInfo'])
            }).catch();
        }
    }

    changeMoney(money) {
        if ((money + '').indexOf('.') > -1 && money != '.') {
            this.setState({
                money: money
            });
            let arr = money.split('.');
            money = arr[0];
            let moneyFloat = '';
            for (let i = 1; i < arr.length; i++) {
                if (arr[i] >= 0) {
                    if (i == 1) {
                        moneyFloat += ('.' + arr[i]);
                    } else {
                        moneyFloat += arr[i];
                    }
                    if (moneyFloat.length > 3) {
                        moneyFloat = moneyFloat.substring(0, 3);
                    }
                }
            }
            money += moneyFloat;
            setTimeout(() => {
                this.setState({
                    money: money
                });
            });
        } else {
            if (money == '.' || money == '0') {
                money = '0.';
            }
            this.setState({
                money: money
            });
        }
    }

    componentDidMount() {
        this.setState({
            cardInfo: JSON.parse(this.$router.params.cardInfo)
        });
    }


    render() {
        const moneyList = [30, 50, 100, 200];
        // @ts-ignore
        const {money, cardInfo} = this.state;
        return (
            <HxPage>
                <View
                    hidden={!cardInfo}
                    className='cardInfo'>
                    <View className='cardInfo_item'>
                        <View>机构</View>
                        <View>{cardInfo.companyname}</View>
                    </View>
                    <View className='cardInfo_item'>
                        <View>卡号</View>
                        <View>{cardInfo.cardId}</View>
                    </View>
                    <View className='cardInfo_item'>
                        <View>编号</View>
                        <View>{cardInfo.empnoId}</View>
                    </View>
                    <View className='cardInfo_item'>
                        <View>姓名</View>
                        <View>{cardInfo.name}</View>
                    </View>
                </View>

                <View className='chargeInfo'>
                    <View className='chargeInfo_ipt'>
                        <View className='chargeInfo_ipt_left'>
                            <AtInput
                                name='money'
                                title='充值金额'
                                type='digit'
                                placeholder='请输入或者选择充值金额'
                                value={money}
                                border={false}
                                onChange={this.changeMoney.bind(this)}
                            />
                        </View>
                        <View className='chargeInfo_ipt_right'>
                            元
                        </View>
                    </View>
                    <View className='chargeInfo_select'>
                        {
                            moneyList.map((item) => (
                                <View
                                    key={item}
                                    className={item == money ? 'chargeInfo_select_item chargeInfo_select_active' : 'chargeInfo_select_item'}
                                    onClick={this.changeMoney.bind(this, item)}>{item}元</View>
                            ))
                        }
                    </View>
                </View>

                <View className='confirm'>
                    <View className='confirm_left'>
                        应付：
                        <View
                            hidden={parseFloat(money) <= 0}
                            className='confirm_left_money'>
                            ¥{money}
                        </View>
                    </View>
                    <View
                        className={parseFloat(money) > 0 ? 'confirm_right' : 'confirm_right confirm_disable'}
                        onClick={this.onSubmit.bind(this)}>
                        确定
                    </View>
                </View>
            </HxPage>
        );
    }
}
